<template>
  <div class="service-promise-label">
    <section
      class="service_box"
      v-if="detailAll.service_promise.length!=0"
      @click="handleOpenServiceDialog"
    >
      <div class="service_content">
        <div class="shop-server">
          <span
            v-for="(service_promise_vo,index) in detailAll.service_promise"
            :key="index"
            v-if="index<3"
          >
            <i class="img-promise">
              <img :src="service_promise_vo.img" v-if="service_promise_vo.img" />
              <img
                src="https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_promise.png"
                v-else
              />
            </i>
            {{service_promise_vo.name}}
          </span>
          <!-- <svg-icon icon-class="icon_right" class="all-class-icon"></svg-icon> -->
          <!-- TODO 暂时隐藏svg -->
          <i class="icon-right"></i>
        </div>
      </div>
    </section>
    <!--服务承诺弹层-->
    <service-promise :visible.sync="serviceDialogVisible" :serviceData="detailAll.service_promise"></service-promise>
  </div>
</template>


<script>
import Vue from "vue";
import servicePromise from "../../../../components/servicePromise";
export default Vue.extend({
  props: {
    detailAll: {
      type: Object,
    },
  },
  components: {
    servicePromise,
  },
  data() {
    return {
      serviceDialogVisible: false,
    };
  },
  beforeDestroy() {
    // TODO 页面销毁前销毁所有监听事件
    this.$off()
  },
  methods: {
    // 打开服务承诺
    handleOpenServiceDialog() {
      this.serviceDialogVisible = true;
    },
  },
});
</script>

<style></style>